<template>
  <Layout title="诉求详情" :has-back="true" :has-tabbar="false" ref="layout">
    <view
      style="width: 100%; height: 100%; box-sizing: border-box; padding: 20rpx"
    >
      <Scroll>
        <view style="display: flex; flex-direction: column; row-gap: 20rpx">
          <view>姓名: {{ owner.name }}</view>
          <view>组团: {{ owner.groupName }}</view>
          <view>路址: {{ owner.address }}</view>
          <view>类型: {{ owner.homeType }}</view>
          <view style="display: flex">
            <view> 常住: </view>
            <view style="margin-left: 20rpx">
              <u-tag
                size="mini"
                :type="getLiveStatus(owner.liveStatus).type"
                :text="getLiveStatus(owner.liveStatus).text"
              ></u-tag>
            </view>
          </view>
          <view style="display: flex">
            <view> 装修: </view>
            <view style="margin-left: 20rpx">
              <u-tag
                size="mini"
                :type="getDecorationStatus(owner.decorationStatus).type"
                :text="getDecorationStatus(owner.decorationStatus).text"
              ></u-tag>
            </view>
          </view>
          <view>状态: {{ owner.homeStatus }}</view>
          <view>友好: {{ owner.ownerType }}</view>
          <view style="display: flex">
            <view> 欠费: </view>
            <view style="margin-left: 20rpx">
              <u-tag
                size="mini"
                :type="getOweStatus(owner.oweStatus).type"
                :text="getOweStatus(owner.oweStatus).text"
              ></u-tag>
            </view>
          </view>
          <view>习惯: {{ owner.payStyle }}</view>
          <view>月份: {{ JSON.stringify(owner.payMonth) }}</view>
          <view style="display: flex">
            <view>部门问题: </view>
            <view
              style="
                display: flex;
                flex-direction: column;
                row-gap: 10rpx;
                margin-left: 20rpx;
              "
            >
              <view
                v-for="(departmentQuestion, index) of owner.departmentQuestion"
                :key="index"
                style="display: flex"
              >
                <view>{{
                  `${index + 1}. ${departmentQuestion.join("/")}`
                }}</view>
              </view>
            </view>
          </view>
          <view style="display: flex">
            <view>业主问题: </view>
            <view style="margin-left: 20rpx">{{ owner.ownerQuestion }}</view>
          </view>
        </view>
      </Scroll>
    </view>
  </Layout>
</template>
<script>
import Layout from "@/pages/component/layout/index.vue";
import Scroll from "@/pages/component/scroll/index.vue";
export default {
  components: { Layout, Scroll },
  onLoad(event) {
    this.owner = JSON.parse(event.owner);
  },
  data() {
    return {
      owner: {},
    };
  },
  methods: {
    getOweStatus(status) {
      if (status === "1") {
        return {
          type: "error",
          text: "是",
        };
      } else if (status === "2") {
        return {
          type: "success",
          text: "否",
        };
      }
    },
    getLiveStatus(status) {
      if (status === "1") {
        return {
          type: "error",
          text: "是",
        };
      } else if (status === "2") {
        return {
          type: "success",
          text: "否",
        };
      }
    },
    getDecorationStatus(status) {
      if (status === "1") {
        return {
          type: "error",
          text: "是",
        };
      } else if (status === "2") {
        return {
          type: "success",
          text: "否",
        };
      }
    },
  },
};
</script>
